<template>
  <div class="home">
    <div class="vidio">
      <video autoplay loop muted>
        <source src="~@/assets/image/bg.mp4" type="video/mp4">
      </video>
    </div>
    <header>
      <header-about></header-about>
    </header>
    <section>
      <div class="clear">
        <div class="left">
          <div class="next" @click="onNext">></div>
          <div class="prev" @click="onPrev">&lt;</div>
          <div class="sub-menu">
            <div class="line" :style="`transform: translateX(${index* 90}px)`"></div>
            <ul @mouseout="onOut">
              <li @click="index = 0,activeIndex = 0" @mouseover="onMove(0)">01</li>
              <li @click="index = 1,activeIndex = 1" @mouseover="onMove(1)">02</li>
              <li @click="index = 2,activeIndex = 2" @mouseover="onMove(2)">03</li>
              <li @click="index = 3,activeIndex = 3" @mouseover="onMove(3)">04</li>
            </ul>
            <div class="name" :style="`transform: translateX(${index* 90}px)`">
              <span>{{ fonts.words }}</span>
              <div class="name-font" v-if="index == 3?true:false">
                <p>FILM</p>
                <p>TV</p>
                <p>VFX</p>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="content" ref="container">
            <div class="contentScroll">
              <div class="r-content">
                <div class="about-company" @mousewheel="onScroll" v-if="index == '0'?true:false">
                  <about-company></about-company>
                </div>
                <div class="about-team" @mousewheel="onScroll" v-if="index == '1'?true:false">
                  <about-team></about-team>
                </div>
                <div class="about-early" @mousewheel="onScroll" v-if="index == '2'?true:false">
                  <about-early></about-early>
                </div>
                <div class="about-post-film" @mousewheel="onScroll" v-if="index == '3'?true:false">
                  <about-post-film></about-post-film>
                </div>
              </div>
            </div>
            <div class="isscrollbar">
              <div class="iScrollIndicator"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import AboutCompany from '@/components/AboutCompany.vue'
import HeaderAbout from '@/components/HeaderAbout.vue'
import AboutTeam from '@/components/AboutTeam.vue'
import AboutEarly from '@/components/AboutEarly.vue'
import AboutPostFilm from '@/components/AboutPostFilm.vue'
// import BScroll from 'better-scroll'
export default {
  components: {
    AboutCompany,
    HeaderAbout,
    AboutTeam,
    AboutEarly,
    AboutPostFilm
  },
  data() {
    return {
      index:0,
      activeIndex:-1,
      nameIndex:1
    }
  },
  // mounted() {
  // new BScroll(this.$refs.container,{
  //   click:true,
  //   scrollbar:{
  //     fade:true,
  //     interactive:false,
  //   },
  //   zoom:true,
  //   mouseWheel:true,
  // });
  // },
  computed: {
    fonts() {
      let words = ''
      if(this.index == 0) {
        words="COMPANY"
      } else if(this.index == 1) {
        words = 'TEAM'
      } else if(this.index == 2) {
        words = 'EARLY EQUIPMENT'
      } else if(this.index == 3) {
        words = 'POST-PRODUCTION'
      }
      return {
        words
      }
    }
  },
  methods: {
    onMove(e) {
      this.activeIndex = this.index
      this.index =e
    },
    onOut() {
      this.index = this.activeIndex
    },
    onNext() {
      this.index++
      if(this.index>=4) {
        this.index=0
      }
      console.log(this.index);
    },
    onPrev() {
      this.index--
      if(this.index<0) {
        this.index =3
      }
      console.log(this.index);
    },
    onScroll(e) {
      console.log(e);
      const iScrollIndicator = document.querySelector('.iScrollIndicator')
      console.log(e.y - iScrollIndicator.clientHeight);
      let index = 50;
      let indexs= 88
      if(e.wheelDelta >0 || e.detail < 0) {
        if(e.y - iScrollIndicator.clientHeight + index === 0) {
          iScrollIndicator.style.top = 0+'px'
        }
        iScrollIndicator.style.top = e.y - iScrollIndicator.clientHeight - index +'px'
        index--
        console.log('向上');
      } else {
        console.log('向下');
        if(e.y - iScrollIndicator.clientHeight + index > 404) {
          iScrollIndicator.style.bottom =  '0px'
        }
        iScrollIndicator.style.top =  e.y - iScrollIndicator.clientHeight + indexs +'px'
        indexs++
      }
    }
  },
}
</script>
<style lang="sass">
.home
  width: 100%
  height: 100%
  background-position: center center
  background-repeat: no-repeat
  background-size: cover
  .vidio
    position: absolute
    width: 100%
    height: 100%
    overflow: hidden
    z-index: 0
    video
      display: block
      position: absolute
      left: 50%
      top: 50%
      transform: translate(-50%, -50%)
  section
    position: absolute
    top: 106px
    z-index: 1
    padding: 0 36px
    width: 100%
    .clear
      width: 100%
      height: 100%
      display: flex
      justify-content: space-between
      .left
        width: 40%
        text-align: right
        padding-right: 73px
        .next,.prev
          height: 55px
          cursor: pointer
        .sub-menu
          height: 44px
          position: relative
          border-bottom: 1px solid #fff
          width: 360px
          height: 40px
          text-align: center
          margin-left: calc( 100% - 360px )
          .line
            position: absolute
            top: 39px
            height: 2px
            background-color: #fff
            pointer-events: none
            transition: all 0.3s ease-in-out
            z-index: 21
            width: 25%
          ul
            width: 360px
            height: 100%
            display: flex
            margin-left: calc( 100% - 360px )
            li
              position: relative
              display: block
              width: 25%
              cursor: pointer
              font-size: 12px
          .name
            font-size: 12px
            text-align: center
            width: 25%
            transition: .5s
            span
              transition: .5s
            .name-font
              text-align: right
              cursor: pointer
              p:hover
                color:#e50050
      .right
        width: 57%
        height: 404px
        font-size: 12px
        .content
          position: relative
          width: 100%
          height: 100%
          z-index:1
          overflow: scroll
          overflow-x: hidden
          display: flex
          &::-webkit-scrollbar
            display: none
          .contentScroll
            height: auto
            transition-timing-function:cubic-bezier(0.1, 0.57, 0.1, 1)
            transition-duration: 0ms
            transform: translate(0px, 0px) translateZ(0px)
            .r-content
              margin-right: 100px
          .isscrollbar
            position: fixed
            width: 3px
            bottom: 2px
            top: 110px
            right: 40px
            z-index: 25
            height: 404px
            .iScrollIndicator
              height: 236px
              position: absolute
              background: #fff
              border-radius: 1.5px
              width: 3px
              display: block
              overflow: hidden
            &::after
              content: ""
              display: block
              position: absolute
              left: 1px
              width: 1px
              height: 100%
              background-color: #fff
@media screen and ( max-width:800px)
  header
    color: green
@media screen and ( max-width:400px)
  header
    color: pink
</style>
